<template>
  <div class="yonghuqu">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="辅导员列表" name="first">
        <div class="sbutton">
          <button id="addteacher" @click="torouter('fudaoyuan')">
            新增教师
          </button>
          <button>导入</button>
          <button @click="dcdata('fudaoyuan')">导出</button>
        </div>
        <div class="fudaoyuan">
          <el-table
            border
            class="thirdtable"
            :data="teachlist"
            :header-cell-style="{ background: '#FAFAFA' }"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="工号" prop="gh"></el-table-column>
            <el-table-column label="姓名" prop="xm"></el-table-column>
            <el-table-column label="性别" prop="xb_mc"></el-table-column>
            <el-table-column label="入职时间" prop="rzsj"></el-table-column>
            <el-table-column label="教师职称" prop="jszc_mc"></el-table-column>
            <el-table-column label="岗位等级" prop="gwzj_mc"></el-table-column>
            <el-table-column label="联系电话" prop="lxdh"></el-table-column>
            <el-table-column label="部门" prop="bmmc"></el-table-column>
            <el-table-column label="操作" prop="username">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  content="查看"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-document"
                    @click="xiangxi(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="修改"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="showEditDialog(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>

      <!-- 其他 -->
      <el-tab-pane label="其他管理人员" name="second">
        <div class="sbutton">
          <button id="addteacher" @click="torouter('qtglry')">新增教师</button>
          <button>导入</button>
          <button @click="dcdata('qtglry')">导出</button>
        </div>
        <div class="fudaoyuan">
          <el-table
            border
            v-if="teachlist.sfwfdy == 1"
            class="thirdtable"
            :data="teachlist"
            :header-cell-style="{ background: '#FAFAFA' }"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="工号" prop="gh"></el-table-column>
            <el-table-column label="姓名" prop="xm"></el-table-column>
            <el-table-column label="性别" prop="xb_mc"></el-table-column>
            <el-table-column label="入职时间" prop="rzsj"></el-table-column>
            <el-table-column label="教师职称" prop="jszc_mc"></el-table-column>
            <el-table-column label="岗位等级" prop="gwzj_mc"></el-table-column>
            <el-table-column label="联系电话" prop="lxdh"></el-table-column>
            <el-table-column label="部门" prop="bmmc"></el-table-column>
            <el-table-column label="操作" prop="username">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  content="查看"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-document"
                    @click="xiangxi(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="修改"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="showEditDialog(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            border
            v-else
            class="thirdtable"
            :header-cell-style="{ background: '#FAFAFA' }"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="工号"></el-table-column>
            <el-table-column label="姓名"></el-table-column>
            <el-table-column label="性别"></el-table-column>
            <el-table-column label="入职时间"></el-table-column>
            <el-table-column label="教师职称"></el-table-column>
            <el-table-column label="岗位等级"></el-table-column>
            <el-table-column label="联系电话"></el-table-column>
            <el-table-column label="部门"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  content="查看"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-document"
                    @click="xiangxi(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  content="修改"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="showEditDialog(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
      

      <span class="dialog-footer" slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import ajax from "../../api/ajax.js";
import qs from "qs";
export default {
  props: { zjform: null },
  data() {
    return {
      // 控制修改用户对话框的显示和隐藏
      // dialogVisible: false,
      //获取用户列表的参数对象
      queryInfo: {
        query: "",
        //当前的页数
        pagenum: 1,
        // 当前每一页显示的数据
        pagesize: 10,
      },
      activeName: "first",
      teachlist: [],
      total: 0,
      aa: {
        fileName: "38a1b512-c0ec-4aec-9947-c2e95e510728_js.xlsx",
        delete: "true",
      },
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    //获取用户列表
    async getUserList() {
      const result = await ajax(
        "fdyxxb/list?pageNum=" +
          this.queryInfo.pagenum +
          "&pageSize=" +
          this.queryInfo.pagesize,
        {},
        "get"
      );
      if (result.code !== 200) {
        console.log(result);
        return this.$message.error("获取列表失败!");
      }
      this.teachlist = result.rows;
      this.total = result.total;
      console.log(JSON.parse(JSON.stringify(this.teachlist)));
    },
    //导出数据
    async dcdata() {
      const result = await ajax(
        "fdyxxb/export?pageNum=" +
          this.queryInfo.pagenum +
          "&pageSize=" +
          this.queryInfo.pagesize,
        {},
        "get"
      );
      this.aa.fileName = result.msg;
      window.location.href =
        "http://192.168.31.185:8080/common/download?fileName=" +
        encodeURI(this.aa.fileName) +
        "&delete=" +
        true;
      document.documentElement.getElementsByTagName("body")[0].style.height =
        document.documentElement.clientHeight + "px";
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    //监听pageSize 改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize;
      this.getUserList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pagenum = newPage;
      this.getUserList();
    },
    //跳转路由到新增教师
    torouter(isfudaoyuan) {
      window.sessionStorage.removeItem("userxinxi")
      if (isfudaoyuan == "fudaoyuan") {
        this.$router.push("/addteacher");
      }
      if (isfudaoyuan == "qtglry") {
        this.$router.push("/addqtry");
      }
    },
    // 展示修改用户的对话框
    showEditDialog(row) {
      console.log(row);
      window.sessionStorage.setItem("userxinxi", JSON.stringify(row));
      this.$router.push("/addteacher");
    },
    //查看用户详细内容
    xiangxi(row) {
      console.log(row);
      window.sessionStorage.setItem("userxinxi", JSON.stringify(row));
      this.$router.push("/details");
    },
  },
  watch: {
    zjform(a, b) {
      console.log(a, b);
      this.teachlist = a;
    },
  },
};
</script>
<style lang="less" scoped>
.yonghuqu {
  position: relative;
  width: 100%;
  height: 100%;
}
.el-tabs {
  height: 100%;
  width: 100%;
  background: #fff;
}
.fudaoyuan {
  margin-top: 5px;
  margin-left: 24px;
  width: 97%;
  height: 100%;
  overflow: auto;
  .outandin {
    height: 10%;
    width: 100%;
    background: cornflowerblue;
  }
}
.el-pagination {
  height: 8%;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
#addteacher {
  width: 90px;
  color: #fff;
  background: #064db4;
}
#addteacher:hover {
  background: #66b1ff;
  border: none;
}
.sbutton {
  margin-left: 30px;
  button {
    cursor: pointer;
    color: #064db4;
    outline: none;
    font-size: 16px;
    font-family: PingFang Medium;
    font-weight: 400;
    margin-right: 10px;
    margin-bottom: 15px;
    border: 2px #064db4 solid;
    background-color: #fff;
    width: 70px;
    height: 40px;
    border-radius: 4px;
  }
  button:hover {
    color: #409eff;
    border: 2px #409eff solid;
  }
}
</style>